<template>
  <Layout :footerState="footerState">
    <div slot="main">
      <div class="wordsWraning">
        <router-link to="/#">
          <a class="wraning-words">
            <div class="range">9</div>
          </a>
        </router-link>
      </div>
      <div class="order-tab">
        <router-link to="/billing" tag="div">
          <img src="~img/icon_shouye_kaidan.png">
          <span>开单</span>
        </router-link>
        <div>
          <img src="~img/icon_shouye_shoukuan.png">
          <span>收款</span>
        </div>
        <div>
          <img src="~img/icon_shouye_guadan.png">
          <span>挂单</span>
        </div>
      </div>
      <div class="order-options">
        <router-link
          to="/#"
          tag="div"
          class="order-options-tab"
          v-for="(item,index) in tabOne"
          :key="index"
        >
          <img :src="item.img">
          <p>{{item.name}}</p>
        </router-link>
      </div>
      <div class="order-options-header">交易管理</div>
      <div class="order-options">
        <router-link
          to="/#"
          tag="div"
          class="order-options-tab"
          v-for="(item,index) in tabTwo"
          :key="index"
        >
          <img :src="item.img">
          <p>{{item.name}}</p>
        </router-link>
      </div>
      <div class="order-options-header">促销活动</div>
      <div class="order-options">
        <router-link
          to="/#"
          tag="div"
          class="order-options-tab"
          v-for="(item,index) in tabThree"
          :key="index"
        >
          <img :src="item.img">
          <p>{{item.name}}</p>
        </router-link>
      </div>
      <div class="order-options-header">金融服务</div>
      <div class="order-options">
        <router-link
          to="/#"
          tag="div"
          class="order-options-tab"
          v-for="(item,index) in tabFour"
          :key="index"
        >
          <img :src="item.img">
          <p>{{item.name}}</p>
        </router-link>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from "@/components/common/layout";
import img1 from "img/icon_shouye_huiyuan.png";
import img2 from "img/icon_shouye_daihuan.png";
import img3 from "img/icon_shouye_buhuo.png";
import img4 from "img/icon_shouye_diaobo.png";
import img5 from "img/icon_shouye_ruku.png";
import img6 from "img/icon_shouye_pandian.png";
import img7 from "img/icon_shouye_youhuiquan.png";
import img8 from "img/icon_shouye_shoukuanjilu.png";
import img9 from "img/icon_shouye_xianshangjiaoyi.png";
import img10 from "img/icon_shouye_xianxiajiaoyi.png";
import img11 from "img/icon_shouye_chongzhi.png";
import img12 from "img/icon_shouye_tuihuo.png";
import img13 from "img/icon_shouye_tuikuan.png";
import img14 from "img/icon_shouye_youhui.png";
import img15 from "img/icon_shouye_manjian.png";
import img16 from "img/icon_shouye_tejia.png";
import img17 from "img/icon_shouye_zengquan.png";
import img18 from "img/icon_shouye_daihuan.png";
import img19 from "img/icon_shouye_xinyong.png";
import img20 from "img/icon_shouye_xindai.png";
import img21 from "img/icon_shouye_licai.png";
export default {
  data() {
    return {
      footerState: true,
      tabOne: [
        {
          img: img1,
          name: "会员",
          link: ""
        },
        {
          img: img2,
          name: "会员卡",
          link: ""
        },
        {
          img: img3,
          name: "补货",
          link: ""
        },
        {
          img: img4,
          name: "调拨",
          link: ""
        },
        {
          img: img5,
          name: "入库管理",
          link: ""
        },
        {
          img: img6,
          name: "盘点",
          link: ""
        },
        {
          img: img7,
          name: "优惠券",
          link: ""
        }
      ],
      tabTwo: [
        {
          img: img1,
          name: "收款记录",
          link: ""
        },
        {
          img: img2,
          name: "线上交易",
          link: ""
        },
        {
          img: img3,
          name: "线下交易",
          link: ""
        },
        {
          img: img4,
          name: "充值记录",
          link: ""
        },
        {
          img: img5,
          name: "退货记录",
          link: ""
        },
        {
          img: img6,
          name: "退款记录",
          link: ""
        }
      ],
      tabThree: [
        {
          img: img14,
          name: "随机优惠",
          link: ""
        },
        {
          img: img15,
          name: "满减活动",
          link: ""
        },
        {
          img: img16,
          name: "特价活动",
          link: ""
        },
        {
          img: img17,
          name: "赠券活动",
          link: ""
        }
      ],
      tabFour: [
        {
          img: img18,
          name: "待还款",
          link: ""
        },
        {
          img: img19,
          name: "淘信用",
          link: ""
        },
        {
          img: img20,
          name: "淘信贷",
          link: ""
        },
        {
          img: img21,
          name: "理财",
          link: ""
        }
      ]
    };
  },
  components: {
    Layout
  }
};
</script>
<style lang="scss" scoped>
.wordsWraning {
  display: flex;
  padding: 0 0.38rem;
  align-items: center;
  justify-content: flex-end;
  height: 1rem;
  background-color: #ff5355;
  .wraning-words {
    position: relative;
    display: flex;
    width: 0.46rem;
    height: 0.45rem;
    background: url("~img/icon_shouye_xiaoxi.png") 0 0 no-repeat;
    background-size: 100% 100%;
    .range {
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      border-radius: 50%;
      background-color: #ffffff;
      position: absolute;
      right: 0;
      top: -0.14rem;
      right: -0.18rem;
      color: #e84b5e;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.order-tab {
  display: flex;
  height: 1.8rem;
  background-color: #ff5355;
  margin-top: -1px;
  div {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    img {
      height: 0.64rem;
    }
    span {
      margin-top: 0.3rem;
      color: #ffffff;
      font-size: 0.3rem;
    }
  }
}
.order-options {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: #fff;
  .order-options-tab {
    display: flex;
    flex-wrap: wrap;
    width: 25%;
    height: 2.08rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 0.58rem;
      height: 0.58rem;
    }
    p {
      margin-top: 0.36rem;
      font-size: 0.24rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }
}
.order-options-header {
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  height: 0.8rem;
  background-color: #ffffff;
  font-size: 0.28rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  margin-top: 0.1rem;
}
</style>

